<%@ page language="java" import="java.util.*,com.model.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<style type="text/css">
html, body { height: 100%; } 

<%
  ArrayList<Beanuser> al=new ArrayList<Beanuser>();
  locationBO lbo=new locationBO();
  al=lbo.getLocation();
 
 %>

</style>
<script type="text/javascript"> 
	
//<![CDATA[

     // global "map" variable
      var map = null;
      var marker = null;
	  var gmarkers = []; 
	  var ss="";
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
    google.maps.event.trigger(marker, 'click');    
    return marker;
}

 

function initialize() {
  // create the map
  var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(31.27974665,120.72396718),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);
 
  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

  google.maps.event.addListener(map, 'click', function(event) {
	//call function to create marker
        // if (marker) {
         //   marker.setMap(null);
           // marker = null;
      //   }
     
	 marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng);
	 ss=ss+event.latLng;
	 gmarkers.push(event.latLng);
	// alert(ss);
	
  });


}

//////////////////////////////////////////////////////////////////////////////
	function createXMLHttpRequest() {
	if (window.XMLHttpRequest) { //Mozilla 浏览器
		HttpReq = new XMLHttpRequest();
	} else if (window.ActiveXObject) { // IE浏览器
		HttpReq = new ActiveXObject("Microsoft.XMLHTTP");
	}
	}
	//发送请求函数
	function sendRequest(url) {
		createXMLHttpRequest();
		
		HttpReq.open("POST", url, true);
		HttpReq.onreadystatechange = processResponse;//指定响应函数
		HttpReq.send(null); // 发送请求
	}
	// 处理返回信息函数
	function processResponse() {
		if (HttpReq.readyState == 4) { // 判断对象状态
			if (HttpReq.status == 200) { // 信息已经成功返回，开始处理信息
				//var data = HttpReq.responseText;
				//将数据显示在页面上   
				alert("save sucess");
				} else { //页面不正常
				alert(HttpReq.status);
			}
		}
	}
	//ajax函数
	function createLineCl(){
		var deviceId=document.getElementsByName("deviceId")[0].value;
		//alert(username);
		var uri = "../setSecurityLine?location=" + ss+"&deviceId="+deviceId ;
		alert(uri);
		sendRequest(uri);
		
		//alert(uri);
	}
	////////////////////////////////////////////////////////////////////////////

//]]>
</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
 <table width="100%" height="100%" border="2" bordercolor="#CCCCCC">
  <tr>
    <td width="100%" height="100%">
    	<table width="100%" height="100%" border="1"> 
        <tr> 
        <td> 
           <div id="map_canvas" style="width: 920px; height: 550px"></div> 
        </td> 
        <td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;"> 
           <div id="side_bar"></div> 
        </td> 
      </tr> 
    </table> 
    </td>
    <td width="20%" height="100%" valign="top"><br><br>
    <h5>设置安全路径</h5>
    <SELECT  name="deviceId" id=u37 size=2  style=" valgin:top;width: 200px;height: 250px"  >
		<% 	for(int i= 0;i<al.size();i++)
			 {
				 Beanuser lt=(Beanuser)al.get(i);
		%>
		<OPTION   value=<%=lt.getDeviceid()%>><%=lt.getName()%></OPTION> 
		<%
		}
		%>
	</SELECT>
	<input type="button" onclick="createLineCl()" style="width:75px;align：center ;height: 25px" value="设置"></input>
  
    </td>
    </tr>
</table>
</body> 
</html> 